<template>
  <div class="Layout">
    <div class="Head Border-Bottom">animation</div>
    <div class="Body">
      <div>animation 属性是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode和animation-play-state 属性的一个简写属性形式，它根据帧来展示动画。</div>
      <div class="Code Section">animation: <keyframes> <duration> [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state] [name]</div>
        <ul class="List">
          <li>iteration-count：动画播放的次数。可以是小数，表示播放一部分；可以是infinite，表示无限次数。</li>
          <li>direction：播放方向。
            <ul class="List">
              <li>normal：正向。</li>
              <li>alternate：当动画多次播放时，每次播放都更换方向。</li>
              <li>reverse：反向。</li>
              <li>alternate-reverse：反向，当动画多次播放时，每次播放都更换方向。</li>
            </ul>
          </li>
          <li>fill-mode：设置动画在执行之前和之后如何将样式应用于其目标。</li>
          <li>play-state：设置一个动画运行或暂停。</li>
        </ul>
    </div>
    <div class="Site">参考资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation</div>
  </div>
</template>